<template>
  <img :src="musicList.al.picUrl" class="bigImg" alt="" />
  <div class="detailTop">
    <div class="left">
      <svg class="icon" aria-hidden="true" @click="backHome">
        <use xlink:href="#icon-shangyiyehoutuifanhui-xianxingyuankuang"></use>
      </svg>
      <div class="text">
        <p>{{ musicList.al.name }}</p>
        <p v-for="(item, i) in musicList.ar" :key="i">
          {{ item.name }}
        </p>
      </div>
    </div>
  </div>
  <div class="detaContent" v-show="!isLyricShow">
    <img class="cp" src="@/assets/cp.png" alt="" />
    <img
      :src="musicList.al.picUrl"
      alt=""
      class="cp_a"
      @click="isLyricShow = true"
    />
  </div>
  <div
    class="musicLyric"
    ref="musicLyric"
    v-show="isLyricShow"
    @click="isLyricShow = false"
  >
    <p
      v-for="item in lyric"
      :key="item"
      :class="{
        active:
          currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
      }"
    >
      {{ item.lrc }}
    </p>
  </div>
  <div class="detailFooter">
    <div class="content">
      <input
        type="range"
        class="range"
        step="0.05"
        min="0"
        :max="duration"
        v-model="currentTime"
      />
    </div>
    <div class="footer">
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishou"></use>
      </svg>
      <svg class="icon_a" aria-hidden="true" @click="play" v-if="isbtnShow">
        <use xlink:href="#icon-bofang1"></use>
      </svg>
      <svg class="icon_a" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-zanting1"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-xiayishou"></use>
      </svg>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      isLyricShow: false,
    };
  },
  watch: {
    currentTime: function (newValue) {
      let p = document.querySelector("p.active");
      // console.log([p]);
      if (p) {
        if (p.offsetTop > 300) {
          this.$refs.musicLyric.scrollTop = p.offsetTop - 280;
        }
      }
      if (newValue === this.duration) {
        if (this.playListIndex === this.playList.length - 1) {
          // 如果是最后一首 传值0跳转第一首 重复播放
          this.updataPlayListIndex(0);
          //传值0 默认列表 不会自动播放 需要调用一下播放
          this.play();
        } else {
          //监听播放进度 播放完毕执行下一首函数
          this.updataPlayListIndex(this.playListIndex + 1);
        }
      }
      // console.log(this.$refs.musicLyric);
    },
  },
  computed: {
    ...mapState([
      "duration",
      "lyricList",
      "currentTime",
      "playListIndex",
      "playList",
    ]),
    lyric: function () {
      // 字符串切割
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(11, item.length);
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }
          // console.log(min, sec, Number(mill), lrc);
          return { min, sec, mill, lrc, time };
        });
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time;
          }
        });
        // console.log(arr);
        return arr;
      }
    },
  },
  mounted() {
    // console.log(this.musicList);
    // console.log(this.lyricList.lyric);
    this.addDuration();
  },
  props: ["musicList", "play", "isbtnShow", "addDuration"],
  methods: {
    backHome: function () {
      this.updataDetailShow();
      this.isLyricShow = false;
    },
    goPlay: function (num) {
      let index = this.playListIndex + num;
      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index == this.playList.length) {
        index = 0;
      }
      this.updataPlayListIndex(index);
    },
    ...mapMutations(["updataDetailShow", "updataPlayListIndex"]),
  },
  components: {},
};
</script>
<style lang="less">
.bigImg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(40px);
}
.detailTop {
  display: flex;
  width: 100%;
  height: 1.8rem;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .icon {
    width: 0.7rem;
    height: 0.7rem;
  }
  .left {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.detaContent {
  margin-top: 0.2rem;
  width: 100%;
  height: 9rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  .cp {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.4rem;
    z-index: -1;
  }
  .cp_a {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.3rem;
  }
}
.detailFooter {
  display: flex;
  flex-direction: column;
  .content {
    .range {
      width: 100%;
      height: 0.06rem;
    }
  }
  .footer {
    position: relative;
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon_a {
      height: 1.5rem;
      width: 1.5rem;
    }
    .icon {
      height: 1rem;
      width: 1rem;
    }
  }
}
.musicLyric {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  overflow: scroll;
  p {
    margin-bottom: 0.4rem;
    color: #999;
  }
  .active {
    color: #fff;
    font-size: 0.5rem;
  }
}
</style>
